<template>
	<view class="open">
		<view class="userinfo">
			<u-image :src="userinfo.avatar" width="50" height="50" shape="circle"></u-image>
			<view class="info">
				<view class="name">{{ userinfo.nickname }}</view>
				<view class="vip-tip">
					会员到期时间：<text>{{ userinfo.indate }}</text>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="vip-card" :class="recharge_package_id == item.id ? 'active' : ''" v-for="item,index in vipList"
				:key="item.id" @click="recharge_package_id = item.id">
				<image class="vip-card-bg" :src="`../../../static/image/${index > 0 ? 'vipBg2' : 'vipBg1'}.png`"
					mode="aspectFill"></image>
				<view class="vip-card-ctx">
					<view class="title">{{ item.name }}</view>
					<view class="price">{{ item.sell_price }}</view>
					<view class="old-price">{{ item.original_price }}</view>
				</view>
			</view>
			<view class="btn" @click="payment">立即充值</view>
		</view>
	</view>
</template>

<script>
	import {
		Toast
	} from '../../../static/utils/utils'
	import {
		get,
		post
	} from '@/static/utils/request.js'
	import {
		Member
	} from '../../../static/utils/service'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				vipList: [],
				recharge_package_id: '',
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		onLoad() {
			this.getMemberConfigList()
		},
		methods: {
			//获取付费套餐列表
			async getMemberConfigList() {
				const {
					code,
					data,
					msg
				} = await get(Member.lists)
				this.vipList = data.lists.slice(0, 2)
			},
			//生产付费订单
			async payment() {
				if (!this.recharge_package_id) {
					Toast.none('请选择充值套餐')
					return
				}
				const res = await post(Member.recharge, {
					recharge_package_id: this.recharge_package_id,
					pay_way: 2
				}, '提交中')
				if (res.code === 1) {
					const resp = await post(Member.prepay, {
						from: res.data.from,
						pay_way: 2,
						order_id: res.data.order_id
					}, '调起支付')
					uni.requestPayment({
						...resp.data.config,
						success: res => {
							Toast.none('支付成功')
							setTimeout(() => {
								Routes.back()
							}, 1500)
						},
						fail: error => Toast.none('支付已取消')
					})
				} else {
					Toast.none(res.msg)
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.open {
		padding: 30rpx;

		.userinfo {
			display: flex;
			align-items: center;

			.info {
				margin-left: 20rpx;

				.vip-tip {
					margin-top: 20rpx;
					font-size: 24rpx;
					color: #9a9a9a;
				}
			}
		}

		.main {
			margin-top: 30rpx;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.vip-card {
				position: relative;
				height: 404rpx;
				border-radius: 20rpx;

				&:nth-of-type(n + 2) {
					margin-top: 30rpx;
				}

				.vip-card-bg {
					position: absolute;
					width: 100%;
					height: 100%;
				}

				.vip-card-ctx {
					position: absolute;
					left: 50rpx;
					top: 50rpx;

					.title {
						font-size: 40rpx;
						color: #618092;
					}

					.price {
						margin: 40rpx 0 20rpx;
						color: #618092;
						font-size: 60rpx;
						font-weight: bold;
					}

					.old-price {
						color: #a7b8bf;
						font-size: 40rpx;
						text-decoration: line-through;
					}
				}
			}

			.active {
				box-shadow: 0 0 10rpx #f05948;
			}

			.vip-card:nth-of-type(2) {
				.title {
					color: #e96f2c;
				}

				.price {
					color: #e96f2c;
				}

				.old-price {
					color: #ccab98;
				}
			}

			.btn {
				margin-top: 70rpx;
				height: 80rpx;
				border-radius: 80rpx;
				background-color: #f05948;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
			}
		}
	}
</style>